<template>
  <div>
    <NavBar title="商品列表" />
    <!-- 排序栏 -->
    <div class="order-bar">
      <div
        @click="switchOrderStatus(0)"
        :class="['order', 'sale', { active: orderStatus.by === 0 }]"
      >
        <span>销量</span>
      </div>
      <div
        @click="switchOrderStatus(1)"
        :class="['order', 'price', { active: orderStatus.by === 1 }]"
      >
        <span>价格</span>
        <div
          :class="[
            'angle',
            'up',
            { active: orderStatus.by === 1 && orderStatus.upDown === 0 },
          ]"
        ></div>
        <div
          :class="[
            'angle',
            'down',
            { active: orderStatus.by === 1 && orderStatus.upDown === 1 },
          ]"
        ></div>
      </div>
      <div
        @click="switchOrderStatus(2)"
        :class="['order', 'new', { active: orderStatus.by === 2 }]"
      >
        <span>新品</span>
      </div>
    </div>
    <!-- /排序栏 -->
    <div class="items">
      <div
        class="item"
        @click="
          router.push({
            path: '/detail',
            query: {
              id: item.id,
            },
          })
        "
        v-for="item in items"
        :key="item.id"
      >
        <img :src="item.pic" alt="" class="item-thumb" />
        <div class="item-info">
          <h5>{{ item.name }}</h5>
          <div class="item-actions">
            <p class="price">￥{{ item.minPrice }}</p>
            <van-icon name="gouwuchetianjia" size="20" class-prefix="icon" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="itemLists">
import { reactive, computed, ref, onMounted, watchEffect, watch } from "vue";
import NavBar from "@/components/NavBar.vue";
import { useRoute, useRouter } from "vue-router";
import { fetchItems } from "@/api";

const route = useRoute();
const router = useRouter();
const orderStatus = reactive({
  by: 0, // 0销量 1价格 2新品
  upDown: 0, // 0升序1降序
});
// 点击排序栏切换排序状态
const switchOrderStatus = (orderIndex: number) => {
  // orderIndex 按照什么进行排序  0 销量 1 价格 2新品

  // 判断是否 orderIndex 是不是 按照价格 1
  if (orderIndex !== 1) {
    // 切换到销量或者 新品
    orderStatus.by = orderIndex;
  } else {
    // 切换到价格
    // 此时 不是按照价格排序 切换到 价格  默认按照价格 升序
    if (orderStatus.by !== 1) {
      orderStatus.by = orderIndex;
      orderStatus.upDown = 0;
    } else {
      // 现在就是按照价格排序 切换升序还是降序
      if (orderStatus.upDown === 0) {
        orderStatus.upDown = 1;
      } else {
        orderStatus.upDown = 0;
      }
    }
  }
};
// 排序参数
const orderBy = computed(() => {
  let order = "ordersDown";
  switch (orderStatus.by) {
    case 0: // 销量降序
      order = "ordersDown";
      break;
    case 1: // 价格
      if (orderStatus.upDown === 0) {
        order = "priceUp";
      } else {
        order = "priceDown";
      }
      break;
    case 2: // 新品
      order = "addedDown";
      break;
    default:
      break;
  }
  return order;
});

const items = ref<any[]>([]);
const getItems = () => {
  fetchItems({
    categoryId: route.query.cateId,
    orderBy: orderBy.value,
  }).then((res) => {
    if (res.data.code === 0) {
      items.value = res.data.data.result;
    }
  });
};
// onMounted(() => {
//   getItems();
// });

// watch(
//   orderBy,
//   () => {
//     getItems();
//   },
//   {
//     immediate: true,
//   }
// );
watchEffect(() => {
  getItems();
});
</script>

<style scoped lang="scss">
.order-bar {
  height: 40px;
  background-color: #f1f1f1;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .order {
    &.active {
      color: #e93323;
    }
    &.price {
      position: relative;
      .angle {
        width: 0;
        height: 0;
        border: 5px solid transparent;
        position: absolute;
        right: -12px;
        &.up {
          border-bottom-color: #333;
          top: 1px;
          &.active {
            border-bottom-color: #e93323;
          }
        }
        &.down {
          border-top-color: #333;
          bottom: -3px;
          &.active {
            border-top-color: #e93323;
          }
        }
      }
    }
  }
}

.items {
  .title {
    line-height: 30px;
    font-size: 18px;
    text-align: center;
    background-color: #f1f1f1;
  }
  .item {
    display: flex;
    img {
      width: 3rem;
    }
    .item-info {
      flex: 1;
      font-size: 14px;
      padding: 0 10px;
      h5 {
        line-height: 24px;
      }
      .item-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #e93323;
        .price {
          font-size: 20px;
        }
      }
    }
  }
}
</style>
